<template>
	<view class="box">
		<!-- 导航 -->
		<view class="nav">
			<view @click="change1"><text>活动</text></view>
			<view @click="change2"><text>活动管理</text></view>
		</view>
		<view class="content">
			<!-- 活动-->
			<view v-show="current === 0" class="card1" v-for="(item, index) in listArr" v-key="index">
				<view class="imgBox2">
					<image class="i1"  @click="dian(item)" :src="listArr1.indexOf(item.active_id)==-1?imgsrc1:imgsrc2" mode=""></image>
					<image :src="item.active_main_picture" mode=""></image>
				</view>
				<view class="cardCon1">
					<text class="text1">{{item.active_title}}</text>
					<navigator
					class="enterBox1"
					@click="gogetactivity(index)"
					 hover-class="navigator-hover">
						<button class="btn" type="default" size="mini">报名</button>
					</navigator>
				</view>
			</view>
			<!-- 活动管理-->
			<!-- v-for="(item, index) in listArr" v-key="index" -->
			<view v-show="current === 1" class="card2">
				<!-- 发布活动 -->
					<navigator
					class="enterBox1"
					url="./addactivity"
					 hover-class="navigator-hover">
					 <view class="imgBox2-1">
						 <image src="../../static/img/jia.png" mode=""></image>
						<text>发布活动</text>
						</view>
					</navigator>
				
				<!-- 编辑活动 -->
				<view class="imgBox2-2" v-for="(item, index) in listArr" v-key="index" >
					<text>{{item.active_title}}</text>
					<view>
						<navigator url="./modifyactivity" hover-class="navigator-hover">
						    <button class="btn1" type="default">编辑</button>
						</navigator>
						<button @click="del(item)" class="btn2" type="default" size="mini">删除</button>
					</view>
				</view>	
			</view>
		</view>
	</view>
</template>

<script>
	
	
export default{
	data(){
		return {
			current: 0,
			imgsrc1:'../../static/img/follow.png',
			imgsrc2:'../../static/img/shoucang.png',
			listArr:[],
			listArr1:[],
			campus_activites_id:'',
			wx_user_id:1
		}
	},
	
	onLoad() {
		this.render()
	},
	
	methods:{
		render(){
			this.$http({
				url:'/activites/findAllCampusActivites'
			}).then((res)=>{
				console.log(res)
				this.listArr=res.data.data
				
			});
			//我的收藏接口
			this.$http({
				url:'/user/myFavorites',
				data:{
					wx_user_id :1
				}
			}).then((res)=>{
				console.log(res.data.data)
				let listARR=[];
				res.data.data.map((v)=>{
					listARR.push(v.active_id)
				})
				this.listArr1=listARR;
			});
			this.current==0;
		},
		del(item){
			console.log(item.active_id)
			this.$http({
				url:'/activites/deleteCampusActivites',
				data:{
					active_id :item.active_id 
				}
			}).then((res)=>{
				console.log(res)
				let page= getCurrentPages().pop()
				page.onLoad();
			})
		},
		dian(item){
			if(this.listArr1.indexOf(item.active_id)==-1){
				console.log(item.active_id)
				this.$http({
					url:'/activites/addFavorites',
					data:{
						campus_activites_id:item.active_id ,
						wx_user_id : this.wx_user_id ,
					}
				}).then((res)=>{
					console.log(res)
					this.render()
				})
			}else{
				console.log(item.active_id)
				this.$http({
					url:'/activites/unFavorite',
					data:{
						campus_activites_id :item.active_id  ,
						wx_user_id : this.wx_user_id ,
					}
				}).then((res)=>{
					console.log(res)
					this.render()
				})
			}
		},
		change1(){
			 this.current = 0;
			 
		},
		change2(){
			 this.current = 1;
			 
		},
		gogetactivity(index){
			
			let arr=this.listArr[index];
			wx.navigateTo({
				url:'./getactivity',
				 success: function(res) {
					 console.log(arr)
				    // 通过eventChannel向被打开页面传送数据
				    res.eventChannel.emit('acceptDataFromOpenerPage', { data:arr })
				  }
			})
		},		
	}
}
</script>

<style lang="less" scoped>
	@import url('../../static/fonts/iconfont.css');
	.box{
		width: 750rpx;
		height: 440rpx;
	}
	.nav{
		display: flex;
		font-size: 44rpx;
		font-weight: 600;
		padding-top: 20rpx;
		view{
			margin:30rpx;
		}
	}
	.content {
		margin-bottom: 50rpx;
		.card1 {
			margin: 0 auto;
			align-items: center;
			margin-bottom: 34rpx;
			width: 690rpx;
			height: 416rpx;
			border-radius: 12rpx;
			overflow: hidden;
			box-shadow: 0 0 12rpx 4rpx #00000030;
			.imgBox2{
				width: 690rpx;
				height: 300rpx;
				position: relative;
				.i1{
					width: 70rpx;
					height: 70rpx;
					position: absolute;
					top: 25rpx;
					right: 30rpx;
					font-size: 50rpx;
				}
				image {
					width: 690rpx;
					height: 300rpx;
				}
			}
			.cardCon1 {
				padding: 30rpx;
				display: flex;
				justify-content: space-between;
				.text1 {
					font-size: 32rpx;
					font-weight: 600;
				}
				.enterBox1 {
					display: flex;
					justify-content: center;
					align-items: center;
					.btn{
						width: 165rpx;
						line-height: 60rpx;
						height: 60rpx;
						font-size: 32rpx;
						background: #f9cc66;
						border-radius: 30rpx;
					}
				}
			}
		}
		.card2 {
			margin: 0 auto;
			width: 690rpx;
			height: 120rpx;
			.imgBox2-1{
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				background: #f9cc66;
				margin-bottom: 34rpx;
				width: 690rpx;
				height: 120rpx;
				border-radius: 12rpx;
				overflow: hidden;
				box-shadow: 0 0 12rpx 4rpx #00000030;
				image{
					width:45rpx;
					height:45rpx;
				}
				text{
					font-size: 30rpx;
				}
			}
			.imgBox2-2{
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 690rpx;
				height: 120rpx;
				margin-bottom: 34rpx;
				border-radius: 12rpx;				overflow: hidden;				box-shadow: 0 0 12rpx 4rpx #00000030;
				text{
					font-size: 30rpx;
					margin-left: 30rpx;
				}
				view{
					margin-right: 30rpx;
					display: flex;
					.btn1{
						border: none;
						background: #f9cc66;
						font-size: 24rpx;
						border-radius:45rpx;
						width: 135rpx;
						margin-right: 15rpx;
					}
					.btn2{
						border: 1px solid #e92525;
						color: #e92525;
						width: 135rpx;
						font-size: 24rpx;
						border-radius:45rpx;
						background: #FFFFFF;
					}
				}
			}
		}
	}
	
</style>
